<template>
	<view v-if="recruitData">
		<view class="box" @click="emitDetail">
			<!-- 岗位 -->
			<view class="title">{{ recruitData.title }}</view>
			<!-- 要求 -->
			<view class="require">{{ recruitData.require }}</view>
			<!-- 公司 -->
			<view class="company">
				<!-- 图片 -->
				<view class="lf">
					<image :src="recruitData.img" mode="widthFix"></image>
				</view>
				<view class="rg">
					<!-- 公司名 -->
					<view class="comname">{{ recruitData.comname }}</view>
					<!-- 公司福利 -->
					<view class="welfare">
						<view class="welfare-item" v-for="(item2, index2) in recruitData.welfare" :key="index2">{{ item2 }}</view>
					</view>
				</view>
			</view>
			<view class="pos">
				<!-- 工资 -->
				<view class="salary">{{ recruitData.salary }}</view>
				<!-- 时间 -->
				<view class="cometime">
					{{ recruitData.cometime }}
				</view>
			</view>
			<!-- 取消申请职位按钮 -->
			<button @click.stop="delItem" v-show="delDeliver" class="delbtn" hover-class="is-hover" hover-stay-time="300">取消申请职位</button>
		</view>
	</view>
</template>

<script>
export default {
	props: ['recruitData', 'delDeliver'],
	name: 'recruitList',
	data() {
		return {};
	},
	methods: {
		// 触发父的事件
		emitDetail() {
			this.$emit('recruitDetail', this.recruitData);
		},
		delItem() {
			this.$emit('delRecruitItem', this.recruitData);
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	position: relative;
	padding: 30rpx 40rpx;
	// border-top: 2rpx solid #bbbbbb;
	margin-bottom: 4rpx;
}
.title {
	font-size: 38rpx;
	font-weight: 700;
}
.require {
	font-size: 28rpx;
	color: #4f4f4f;
	margin: 10rpx 0;
}
.company {
	display: flex;
	.lf {
		width: 120rpx;
		height: 120rpx;
	}
	.rg {
		flex: 1;
		margin-left: 40rpx;
		.comname {
			font-size: 32rpx;
			margin: 10rpx 0;
		}
		.welfare {
			display: flex;
			.welfare-item {
				background-color: #efefef;
				border: 2rpx solid #85888e;
				padding: 10rpx 6rpx;
				color: #6c6c6c;
				font-size: 24rpx;
				margin-right: 20rpx;
				border-radius: 6rpx;
			}
		}
	}
}
.pos {
	position: absolute;
	right: 40rpx;
	top: 28rpx;
	text-align: center;
	.salary {
		color: #e60909;
		font-size: 40rpx;
	}
	.cometime {
		font-size: 28rpx;
		margin-top: 10rpx;
	}
}
.delbtn {
	// #2979ff
	background-color: grey;
	width: 80%;
	font-size: 30rpx;
	margin: 40rpx auto 0;
	text-align: center;
	color: white;
}
.is-hover{
	background-color: #00DCB6;
}

</style>
